<template>
  <view class="cu-item devices" :class="{'arrow': !!message.channelsArr.length,'bg-white':!isDeviceIntroduceDetail}"
        @tap="isDeviceIntroduceDetail ?'' :rowClick(message)">
<!--    新UI屏蔽方法-->
    <!-- 内容 -->
    <view class="content">
      <view>
<!--        新UI样式 -->
        <image v-if="!isDeviceIntroduceDetail" :src="`https://statics.xmcsrv.net/weixin/cloud/device/small/xmcCss.svg`"
               style="padding:3px;width:78upx;height:80upx;" mode="aspectFit"></image>
        <view class="inline-block text-df padding-tb-sm">
          <view style="margin-left: 16upx;">
            <!-- 云存储 -->
<!--            新UI样式-->
            <view :class="isDeviceIntroduceDetail?'detail-title':''">{{ $t('JLink.groups.xmcCss') }}</view>
            <view class="text-sm">
              <!-- 多通道 -->
              <view v-if="message.channelsArr.length">
                <view v-if="message.normalUseChannel" class="text-primary margin-top">
                  {{ message.normalUseChannel }}
                  <text v-if="message.normalUseChannel<=1">{{ $t('JLink.deviceMessage.normalUseOneChannel') }}</text>
                  <text v-else>{{ $t('JLink.deviceMessage.normalUseChannel') }}</text>
                </view>
                <view v-else class="text-gray">
                  <!-- 未开通 -->
                  <view class="height">{{ $t('JLink.deviceMessage.unBuy') }}</view>
                  <!-- 点击开通 -->
                  <view class="height">{{ $t('JLink.deviceMessage.clickOpen') }}</view>
                </view>
              </view>
              <!-- 单通道 -->
              <view v-else>
                <view class="height">
                  <text v-if="message.expireTime"
                        :class="message.expirationtimeColor&&message.expirationtimeColor!='reds' ? 'text-gray':'text-reds'">
                    {{ message.expireTime }}
                  </text>
                  <!-- 未开通 -->
                  <text v-else class="text-gray">{{ $t('JLink.deviceMessage.unBuy') }}</text>
                </view>
                <view class="height text-gray">
                  <view v-if="message.expireTime">
                    <!-- 已到期，点击续费 -->
                    <text v-if="message.expirationtimeColor==='reds'" class="text-reds">
                      {{ $t('JLink.deviceMessage.expire') }}
                    </text>
                    <!-- 正常使用 -->
                    <text v-else class="text-primary">{{ $t('JLink.deviceMessage.inNormal') }}</text>
                  </view>
                  <!-- 点击开通 -->
                  <text v-else>{{ $t('JLink.deviceMessage.clickOpen') }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 操作 -->
<!--    新UI样式-->
    <view v-if="!message.channelsArr.length" class="action" :class="isDeviceIntroduceDetail ? 'detail-button':''">
      <!-- 已购买 -->
      <view v-if="message.expireTime">
        <!-- 已过期,续费 -->
        <button data-code="603003" data-eventName="deviceList_xmcCss_renewal" v-if="message.expirationtimeColor=='reds'"
                class="cu-btn round line-red text-sm" @tap.stop="jumpBuy(message)">{{ $t('JLink.publicText.renewal') }}
        </button>
        <!-- 查看 -->
<!--        新UI添加方法-->
        <button v-else class="cu-btn round line-primary text-sm" @tap.stop="rowClick(message)">{{ $t('JLink.deviceMessage.Check') }}</button>
      </view>
      <view v-else>
        <!-- 未开通 -->
        <button data-code="603002" data-eventName="deviceList_xmcCss_goBuy" class="cu-btn round line-black text-sm"
                @tap.stop="jumpBuy(message)">{{ $t('JLink.deviceMessage.open') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'xmcCss',
  props: {
    message: {
      type: Object,
      default: () => {
        return {
          expirationtime: '',
        }
      },
    },
    // 新UI特定属性
    isDeviceIntroduceDetail: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    // 续费 和 开通 按钮
    rowClick(message) {
      const {classifyId, sn} = message;
      this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}`)
    },
    // 一整行点击
    jumpBuy(message) {
      const {channelsArr, classifyId, sn} = message;
      if (channelsArr && channelsArr.length > 0) { // 多通道
        let deviceMessage = JSON.stringify(message)
        this.$routing(`${this.$pages.channels}?classifyId=${classifyId}&sn=${sn}&deviceMessage=${deviceMessage}`)
      } else { //单通道
        this.$routing(`${this.$pages.buyDefault}?classifyId=${classifyId}&sn=${sn}`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';

.height {
  // height: 1.2rem;
  min-height: 1.2rem;
  max-height: 3.2rem;
}

.devices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}
// 新ui特定样式
.detail-button {
  position: fixed;
  left:70rpx;
  top:180rpx;
  z-index: 999;
}
.detail-title{
  color:black;
  font-weight:500;
}
</style>
